<template>
  <div class="adClass">

    <Row>
      <Col span="20" style="margin-left:65px;">

      <Carousel autoplay loop style="width:1000px">
        <!-- 显示轮播图片 -->
        <template v-for="homedatas in homedata">
          <CarouselItem>
            <div class="demo-carousel" @click="btnActionDetailInfo(homedatas.url)">
              <img :src='homedatas.image' class="AdSetting">
            </div>
          </CarouselItem>
        </template>

      </Carousel>
      </Col>
    </Row>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        value2: 0,

        /**
         * 接收到的数据
         */
        homedata: [{ image: "" }],

        /**
         * 主页信息api接口
         * */

        url: {
          home: this.$Global.url.home
        },

        /**
         * 轮播图片的设置
         */
        setting: {
          autoplay: true,
          autoplaySpeed: 30000,
          dots: "inside",
          radiusDot: false,
          trigger: "hover",
          arrow: "hover"
        }
      };
    },
    methods: {
      /**
       * Get 方式调用主页信息的 API 接口，获取数据
       */
      getData() {
        this.$http
          .get(this.url.home)
          .then(res => {
            if (res.status == 200) {
              this.homedata = res.data.Ad;
              // console.log(this.homedata);
            }
          })
          .catch(error => console.log(error));
      },

      btnActionDetailInfo(url) {
        // console.log(url)
        // var test = 'P3782009995'
        var projectId = url.match(/[P][0-9]{10}/)
        // console.log(projectId[0]);
        // var projectId = projectId[0]
        // console.log(projectId)
        this.$router.push({ name: "ProjectDetailInfo", params: { projectid: projectId[0] } });
      }
    },

    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.home = this.$Global.url.baseUrl + this.$Global.url.home;
      }
      this.getData();
    }
  };
</script>

<style>
  /*
*对广告图片位置大小进行设置
*/

  .AdSetting {
    width: 800px;
    height: 250px;
    margin: auto;
    display: block;
  }

  .adClass {
    margin-bottom: 50px;
  }
</style>